header {
    background-color: #333333;
    color: #b0b0b0;
    // margin-right: 50px;
    width: 100%;

    .nav {
        display: flex;

        a {
            height: 40px;
            color: #b0b0b0;
            line-height: 40px;
            position: relative;

            &:hover {
                color: #fff;
            }
        }

        .sep {
            margin: 0.5em;
            color: #424242;
        }

        .left-nav {
            display: flex;
            align-items: center;

            a:nth-of-type(11) {

                #appcode {
                    position: absolute;
                    top: 40px;
                    left: -35px;
                    width: 124px;
                    height: 0;
                    background: #fff;
                    box-shadow: 0 1px 5px #aaa;
                    text-align: center;
                    font-size: 14px;
                    color: #333;
                    line-height: 1;
                    overflow: hidden;
                    transition: height .3s;
                    z-index: 55;

                    img {

                        width: 90px;
                        height: 90px;
                        padding: 15px;

                    }

                }

                &:hover {
                    &::before {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        width: 0;
                        height: 0;
                        margin-left: -8px;
                        border-width: 0 8px 8px;
                        border-style: solid;
                        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #fff;
                    }

                    #appcode {
                        height: 148px;
                    }
                }
            }


        }

        // loader 动画
        @keyframes loader {
            from {
                // background: red;
                opacity: 1;
            }

            to {
                // background: yellow;
                opacity: 0;
            }
        }

        .right-nav {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-grow: 1;

            .cart {
                width: 120px;
                background-color: #424242;
                margin-left: 30px;

                &:hover {
                    color: #ff6700;
                    background-color: #fff;

                    .cart-menu {
                        height: 100px;
                    }
                }

                i {
                    margin: 0 3px 0 23px;
                }

                .cart-menu {
                    position: absolute;
                    right: 0;
                    top: 40px;
                    width: 316px;
                    height: 0;
                    color: #424242;
                    background-color: #fff;
                    box-shadow: 0px 5px 5px rgba(0, 0, 0, .15);
                    overflow: hidden;
                    transition: height .3s;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    z-index: 4;

                    .loader,
                    .loader:after,
                    .loader:before {
                        transform-origin: 50% 50%;
                        animation-name: loader;
                        animation-duration: .3s;
                        animation-timing-function: linear;
                        animation-iteration-count: infinite;
                        animation-direction: alternate-reverse;
                    }

                    .loader {
                        position: relative;
                        margin: 0 auto;
                        width: 4px;
                        height: 20px;
                        margin-top: 30px;
                        background: #ff6700;
                        overflow: visible;
                        animation-delay: 0s;
                        transform: scale(1);

                        &::before,
                        &::after {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            width: 4px;
                            height: 20px;
                            content: "";
                            background: #ff6700;
                        }

                        &::before {
                            margin: -10px 0 0 -10px;
                            animation-delay: .25s;
                            transform: scaleY(.3);
                        }

                        &::after {
                            margin: -10px 0 0 6px;
                            animation-delay: .5s;
                            transform: scaleY(.5);
                        }
                    }
                }

            }
        }
    }
}